import React, { Component } from 'react'

// 导入路由
import { Route } from 'react-router-dom'

// 导入News组件
import News from '../News'
import HouseList from '../HouseList'
import Index from '../Index'
import Profile from '../Profile'

// 导入用到的组件
import { TabBar } from 'antd-mobile'

// 导入组件的样式
import './index.css'

// TabBar 数据
const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }
]

class Home extends Component {
  state = {
    // 默认选中的TabBar菜单项   this.props.location.pathname 获取当前路由路径
    selectedTab: this.props.location.pathname
  }

  componentDidUpdate(prevProps) {
    // prevProps:上一次的路由信息
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }

  // 渲染 TabBar.Item
  renderTabBarItem() {
    return tabItems.map(item => (
      // icon:默认展示  selectedIcon:选中展示  selected:是否选中  onPress:点击bar触发
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path
          })
          // 路由切换
          this.props.history.push(item.path)
        }}
      />
    ))
  }

  render() {
    return (
      <div className="home">
        {/*  配置子路由 */}
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/list" component={HouseList}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        {/* 渲染 TabBar  
        tintColor:字体颜色   barTintColor:背景色  noRenderContent:不渲染内容部分*/}
        <TabBar tintColor="#21b97a" barTintColor="white" noRenderContent={true}>
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}

export default Home
